<template>
  <footer class="footer">
      <span class="todo-count" v-show="listleng"><strong>{{listleng}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected:type==='all'}" href="#/" @click="changetype('all')">全部</a>
        </li>
        <li>
          <a :class="{selected:type==='active'}" href="#/active" @click="changetype('active')">进行中</a>
        </li>
        <li>
          <a :class="{selected:type==='completed'}" href="#/completed" @click="changetype('completed')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clearclick" v-show="isDoneAll">清除已完成</button>
    </footer>
</template>

<script>
 export default {
   name: 'TodoFooter',
   props: {
    listleng:{
        typeof:Number,
        required:true, 
    },
    isDoneAll:{
        typeof:Boolean,
        required:true,
    },
    type:{
        typeof:String,
        required:true,
    }
   },
   methods:{
    clearclick(){
        this.$emit('clearclick')
    },
    changetype(type){
        this.$emit('changetype',type)
    }
   }
 }
</script>

<style scoped lang='less'>

</style>